<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('create')" name="one" label="新建线路域名">
        <domain-add/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('list')" name="create" label="线路域名管理">
        <domain-list v-show="activeTab === 'create'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import DomainAdd from './domainAdd';
  import DomainList from './domainList';

  import {tabs} from '@/build';

  export default {
    name: "domain-management",

    components: {
      DomainAdd,
      DomainList,
    },

    mixins: [tabs],

    data() {
      return {
        activeTab: 'one'
      }
    }, mounted() {
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '新建线路域名', true)});

    },
    methods: {
      changeTab(tabs) {
        this.activeTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});

      }
    }
  }
</script>

<style scoped>

</style>
